解决Vue前后端跨域问题的多种方式 |
您所在的位置:网站首页 › axios 怎么读 › 解决Vue前后端跨域问题的多种方式 |
开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 28 天,点击查看活动详情 1 前言本文主要介绍借助解决Vue前后端跨域问题的几种方式 说到ajax请求,就不得不说下xhr(XMLHttpRequest)了,它可以说是鼻祖,但是实际开发中,我们不会直接使用它,而是进行二次封装或者使用成熟的第三方封装,比如JQuery,axios 本文将会使用axios进行请求 2 axios介绍既然说到封装了,那就不得不提到axios了,它和JQuery相比,它支持请求拦截器和响应拦截器,并且体积很小,大约是JQuery的四分之一体积,一般在vue项目里面,基本都是使用axios请求 下载axios想要使用axios,必须先下载它,打开终端,输入 npm i axios 复制代码这个库非常的小,安装很快 下载完毕之后,就可以引用了 // 引入axios import axios from 'axios' 复制代码基本工作做完后,就可以开发前后端代码,模拟跨域场景了 后端接口后端起一个服务,端口为9090,有一个get请求,先访问下,因为是get请求,可以直接在浏览器访问,所以说接口是没问题的
有了后端的接口,我们就可以在前端去请求了,上述已经安装好了axios,所以直接编写代码请求后端接口,通过控制台可以看到,前端的端口是8080
然后发送请求,发现控制台报错了,这是一个很经典的跨域问题
所谓的跨域请求就是指:当前发起请求的域与该请求指向的资源所在的域不一样。这里的域指的是这样的一个概念:我们认为若协议 + 域名 + 端口号均相同,那么就是同域。 上面的例子就算因为前后端通信的端口不一致造成的跨域问题 常用的解决问题的手段有以下三种 1 cors 2 JSONP 3 代理 我们一一举例说明 5 解决跨域 cors这种方式是我工作中处理跨域用到最多也是最简单的一种方式,直接通过注解解决跨域问题 cors解决跨域,一般不用于前端做任何事,而是后端或者服务器去操作,其实就是在服务器里面返回相应的时候加几个响应头,某种程度上来说,cors解决跨域才是真正意义上的解决跨域,但是在开发中,这个响应头不是随便配置的,如果随意配置,就会造成一个问题就算任何人都能找服务器要数据,存在一些安全风险 注解解决跨域在后端的controller或某个具体方法上可以加上@CrossOrigin注解解决跨域
如果使用注解,那么我们需要在每一个controller或者方法上都要加上注解才能解决跨域的问题 那么有没有一种一劳永逸的办法呢? 当然有,我们可以使用全局配置跨域,代码如下: 注意:一定不要忘了使用@Configuration注解配置到项目中,否则无效,具体的一些参数或者路径,根据自身需求设置即可
以上就是通过cors解决跨域的两种方式 JSONP除了使用cors解决跨域,还可以使用JSONP,它解决跨域的方式其实挺巧妙的,它借助了script标签li的src属性,在引入外部资源的时候不受同源策略限制的特点办到的,虽然JSONP比较巧妙,但是真正开发中用到的微乎其微,因为想要实现JSONP解决跨域,不仅仅要前端人员要用到特殊写法,后端人员也得配置前端才能实现,并且只能解决get请求跨域问题,相对来说很鸡肋 这里就得吐槽一句了,虽然开发用的少,但是面试就喜欢问你JSONP,就看你知道不知道这个巧 代理由于篇幅问题,我另外写了一篇文章,大家可以参考:使用Vue脚手架配置代理服务器的两种方式 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |